<template>
    <div class="setComponent">
        <div class="form-item">
            <label>Tab标签的位置</label>
            <el-select v-model="obj.tabPosition" placeholder="请选择">
                <el-option
                    v-for="(item,index) in tabPositionOptions"
                    :key="index"
                    :label="item"
                    :value="item"/>
            </el-select>
        </div>
        <div class="form-item">
            <label>Tab选项设置</label>
            <div v-for="(tab, index) in obj.tabList" :key="index">
                <input v-model="tab.label" >
            </div>
            <el-button type="text" @click="addTab"><i class="ft20 iconfont icon-jia"/></el-button>
            <el-button :disabled="obj.tabList.length<=2" type="text" @click="delTab"><i class="ft20 iconfont icon-jian"/></el-button>
        </div>
        <div class="form-item">
            <label>Tab选项内容设置</label>
            <div>
                <el-button @click="tabClick(index)" v-for="(tab, index) in obj.tabList" :key="index" size="mini">{{ tab.label }}</el-button>
            </div>
        </div>
        <div class="form-item">
            <label>Tab容器高度</label>
            <el-slider v-model="obj.height" :min="100" :max="1000"/>
        </div>
        <div class="form-item">
            <label>Tab容器内边距</label>
            <el-slider v-model="obj.padding" :min="0" :max="100"/>
        </div>

    </div>
</template>
<script>
export default {
    name: 'SetTab',
    props: {
        obj: {
            type: Object

        }
    },
    data() {
        return {
            tabPositionOptions: [
                'left',
                'top',
                'bottom',
                'right'
            ]
        }
    },
    methods: {
        addTab() {
            this.obj.tabList.push({ label: `Tab${this.obj.tabList.length}`, value: `f${this.obj.tabList.length}` })
            this.obj.childList[`childList${this.obj.tabList.length}`] = []
        },
        delTab() {
            this.obj.tabList.pop()
            delete this.obj.childList[`childList${this.obj.tabList.length}`]
        },
        tabClick(index) {

        }
    }
}
</script>
<style lang="scss" scoped>

</style>

